<template>
	<view class="background" :style="{'--width':width,'--height':height}">
		<view class="top" :style="{'--width':width,'--height':height}">
			<uni-icons type="back" size="30" class="back" @click="back"></uni-icons>
			<text class="text1">兑换</text>
		</view>
		<view class="bei1" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<input placeholder="请输入激活码" class="input1" v-model="ma">
		</view>
		<view class="but1 flex align-center justify-center" @click="tijiao">
			<text class="text2 text-center">提交</text>
		</view>
		<view class="flex align-center u-font-28 color333 justify-around" style="margin-top: 300rpx;">
			<view class="text-center">
				<view>遇到问题请联系客服</view>
				<image class="u-m-t-30 serveImg" :src="src1" show-menu-by-longpress></image>
			</view>
			<view class="text-center" v-if="src2">
				<view>享受激活码优惠添加</view>
				<image class="u-m-t-30 serveImg" :src="src2" show-menu-by-longpress></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		jihuoma,
		jihuomama,
		kefu,
		serveUser
	} from "@/api/toolbox.js"

	export default {
		data() {
			return {
				width: 0,
				height: 0,
				ma: "",
				src2: "",
				src1: "",
				type: 2, //1为择校  2为调剂
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type;
			}
			let a = uni.getWindowInfo()
			this.width = a.screenWidth
			this.height = a.screenHeight
			jihuomama().then((res) => {
				this.src2 = res.data
			})
			serveUser().then((res) => {
				this.src1 = res.data
			})
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			tijiao() {
				if (!this.ma) {
					uni.showToast({
						title: '激活码不能为空！',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					mask: true
				});
				jihuoma(`?downloadType=${this.type}&code=${this.ma}`).then((res) => {
					console.log('res: ',res);
					if (res.code == 100000 && res.data.charge == 0) {
						uni.showToast({
							title: '激活码使用成功！',
							icon: 'none'
						});
						setTimeout(() => {
							if (this.type == 2) {
								uni.redirectTo({
									url: "xinxi?value=1&&payOrderId=" + res.data.payResponse.orderId
								})
							}else{
								uni.redirectTo({
									url:'/pages/toolbox/chooseSchool/placeOrder?payOrderId='+res.data.payResponse.orderId
								})
							}
						}, 1500)
					}
				}).finally(() => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		background-color: #f0f0f0;
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*940*1px);
	}

	.back {
		margin-left: calc(var(--width)/1000*10*1px);
	}

	.text1 {
		position: absolute;
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*3*1px);
		font-weight: bold;
	}

	.top {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*50*1px);
		background-color: white;
		margin-top: calc(var(--height)/1000*60*1px);
	}

	.bei1 {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*70*1px);
		background-color: white;
		border-top: solid #d9d9d9 1px;
		border-bottom: solid #d9d9d9 1px;
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.tu1 {
		width: calc(var(--width)/1000*80*1px);
		height: calc(var(--height)/1000*100*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*-18*1px);
	}

	.input1 {
		position: absolute;
		width: calc(var(--width)/1000*800*1px);
		margin-left: calc(var(--width)/1000*150*1px);
		margin-top: calc(var(--height)/1000*-70*1px);
	}

	.but1 {
		background-color: #F7DD5E;
		width: calc(var(--width)/1000*550*1px);
		height: calc(var(--height)/1000*80*1px);
		margin-left: calc(var(--width)/1000*220*1px);
		margin-top: calc(var(--height)/1000*50*1px);
		border-radius: calc(var(--height)/1000*70/2*1px);

	}

	.tu2 {
		width: calc(var(--width)/1000*80*1px);
		height: calc(var(--height)/1000*100*1px);
		margin-left: calc(var(--width)/1000*150*1px);
		margin-top: calc(var(--height)/1000*-12*1px);
	}

	.text2 {
		font-size: calc(var(--width)/1000*50*1px);
	}

	.text3 {
		position: absolute;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: calc(var(--width)/1000*330*1px);
		margin-top: calc(var(--height)/1000*50*1px);
	}

	.img1 {
		width: calc(var(--width)/1000*400*1px);
		height: calc(var(--width)/1000*400*1px);
		margin-left: calc(var(--width)/1000*310*1px);
		margin-top: calc(var(--height)/1000*70*1px);
	}

	.text4 {
		font-size: 30rpx;
		font-weight: bold;
		margin-left: calc(var(--width)/1000*330*1px);
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.img2 {
		width: calc(var(--width)/1000*400*1px);
		height: calc(var(--width)/1000*400*1px);
		margin-left: calc(var(--width)/1000*310*1px);
		margin-top: calc(var(--height)/1000*20*1px);
	}

	.serveImg {
		width: 160rpx;
		height: 160rpx;
	}
</style>